<template>
    <div class="container">
        <div class="environment-real-light" v-if="theme == 'light'">
            <div class="item" v-for="(item,index) in overViewData" :key="index">
                <div class="l">
                    <i class="iconfont" :class="item.icon"></i>
                </div>
                <div class="v">
                    <p>{{item.label}}</p>
                    <h2>{{item.value}}<span>{{item.unit}}</span></h2>
                </div>
            </div>
        </div>
        <div class="environment-real" v-else>
            <div class="item" v-for="(item,index) in overViewData" :key="index">
                <p>{{item.label}}</p>
                <h2>{{item.value}}<span>{{item.unit}}</span></h2>
            </div>
        </div>
        <div class="q_top">
        <dv-box title="环境监测" class="echart-center">
            <Echart id="echartT" :options="optionT" ref="echartT" />
            <div class="cutData">
                <div v-for="(item,index) in overViewData" :key="index" :class="clickType == item.type ? 'active' : ''" @click="clickShow(item)">{{item.label}}</div>
            </div>
        </dv-box>
        </div>
        <div class="q_bottom" ref="q_bottom">
            <dv-box title="预警统计" style="padding-top:24px;height:100%">
                <Echart id="chart-container" :options="optionsB"  ref="chart-container" />
            </dv-box>
        </div>
    </div>
</template>

<script>
import dvBox from "@/components/datav/dv-box.vue";
import moment from 'moment'
import { filtTimeList } from '@/utils/utils';
import {mapGetters} from 'vuex';
export default {
    props:{
        id:{
            type:Number|String,
            default:''
        },
    },
    data(){
        return{
            height:'',
            optionT:{},
            optionsB:{},
            timeList:[],
            overViewData:[
                {label:'PM2.5',value:'0',unit:'ug/m³',type:'pm25',icon:'icon-app_icons--'},
                {label:'PM10',value:'0',unit:'ug/m³',type:'pm10',icon:'icon-app_icons--1'},
                {label:'温度',value:'0',unit:'℃',type:'temperature',icon:'icon-w_shidu'},
                {label:'湿度',value:'0',unit:'%',type:'humidity',icon:'icon-biaomianwendu'},
                {label:'噪音',value:'0',unit:'dB',type:'noise',icon:'icon-zaoyin'},
                {label:'风速',value:'0',unit:'m/s',type:'windspeed',icon:'icon-fengsu'},
            ],
            clickType:'pm25',
            // 实时数据
            environmentData:{
                time:[],
                max:[],
                min:[],
                mean:[]
            },
            // 预警指标
            currentalarmcountData:[
                {label:'PM2.5',value:'0',type:'PM25'},
                {label:'PM10',value:'0',type:'PM10'},
                {label:'温度',value:'0',type:'TEMPERATURE'},
                {label:'湿度',value:'0',type:'HUMIDITY'},
                {label:'噪音',value:'0',type:'NOISE'},
                {label:'风速',value:'0',type:'WINDSPEED'},
            ],
            // 预警每日数据
            alarmcountbydayData:[],
        }
    },
    computed:{
        ...mapGetters(["theme"])
    },
    mounted(){
         this.timeList = filtTimeList(14)
         this.getEnvironmentShow()
         this.getEnvironmentData()
         this.getCurrentalarmcountData()
         this.getAlarmcountbydayData()
        //  this.$nextTick(()=>{
        //      let dom = document.getElementById('app').offsetHeight
        //      let q_bottom = this.$refs.q_bottom.offsetHeight
        //      this.$refs.q_bottom.style.height = dom - q_bottom - 221+ 'px'
        //  })
    },
    methods:{
        // 获取环境实时数据 id
        getEnvironmentShow(){
            this.$datav.getEnvironmentShow({projectid:this.id,today:moment().format("YYYY-MM-DD")}).then(res => {
                if(res.data){
                    for(let i=0 ; i < this.overViewData.length ; i++){
                        this.overViewData[i].value = res.data[this.overViewData[i].type].toFixed(2)
                    }
                }
            })
        },
        // 获取环境14天数据 id
        getEnvironmentData(){
            this.environmentData = { time:[], max:[], min:[], mean:[] } // 初始化
            this.$datav.getEnvironmentData({projectid:this.id,type:this.clickType,start:moment().subtract(14,'days').format("YYYY-MM-DD"),end:moment().format("YYYY-MM-DD")}).then(res => {
                this.timeList.map(x => {
                    let arr = res.data.find(y => {
                        return moment(y.partitiondate).format('MM-DD') == x
                    })
                    this.environmentData.time.push(x)
                    if(arr){
                        this.environmentData.max.push(arr.max)
                        this.environmentData.min.push(arr.min)
                        this.environmentData.mean.push(arr.avg)
                    }else{
                        this.environmentData.max.push(0)
                        this.environmentData.min.push(0)
                        this.environmentData.mean.push(0)
                    }
                })
                this.init1()
            })
        },
        // 获取预警指标
        getCurrentalarmcountData(){
            this.$datav.getCurrentalarmcountData({projectid:this.id,today:moment().format("YYYY-MM-DD")}).then(res => {
                 for(let i=0 ; i < this.currentalarmcountData.length ; i++){
                    for(let k=0 ; k < res.data.length ; k++){
                        if(this.currentalarmcountData[i].type == res.data[k].exceptiontype){
                            this.currentalarmcountData[i].value = res.data[k].num
                        }
                    }
                 }
            })
        },
        // 预警统计数据
        getAlarmcountbydayData(){
            this.$datav.getAlarmcountbydayData({projectid:this.id,start:moment().subtract(14,'days').format("YYYY-MM-DD"),end:moment().format("YYYY-MM-DD")}).then(res => {
                for(let i=0 ; i<this.timeList.length ; i++){
                    for(let k=0 ; k < res.data.length ; k++){
                        if(this.timeList[i] == res.data[k].partitiondate){
                            this.alarmcountbydayData.push(res.data[k].num)
                        }else{
                            this.alarmcountbydayData.push(0)
                        }
                    }
                }
                this.init2()
            })
        },
        // 实时数据切换
        clickShow(item){
            this.clickType = item.type
            this.getEnvironmentData()
        },
        // 预警数据切换
        clickWarning(item){},
        init1(){
            this.optionT={ 
                color:['#0374FE','#FE9811','#10CC4F'],
                legend: {
                    icon:'rect',
                    itemHeight: 10,
                    itemWidth: 18,
                    data: ['最大值', '最小值','平均值'],
                    textStyle:{
                        color:'#000'
                    }
                },
                grid: {
                    x:35,
                    y:45,
                    x2:20,
                    y2:20,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.environmentData.time,
                    axisLabel:{
                        color:'#000',
                        // color:'#D0DEEE'
                    }
                },
                yAxis: {
                    splitLine:false,
                    type: 'value',
                    axisLabel:{
                        color:'#000',
                        // color:'#D0DEEE'
                    }
                },
                series: [
                    {
                        name: '最大值',
                        type: 'line',
                        // stack: 'Total',
                        data: this.environmentData.max,
                        smooth: true
                    },
                    {
                        name: '最小值',
                        type: 'line',
                        // stack: 'Total',
                        data: this.environmentData.min,
                        smooth: true
                    },
                    {
                        name: '平均值',
                        type: 'line',
                        // stack: 'Total',
                        data: this.environmentData.mean,
                        smooth: true
                    }
                ]
            }
        },
        init2(){
         this.optionsB = {
                grid:{
                    x:35,
                    y:20,
                    x2:20,
                    y2:20,
                },
               tooltip: {},
                color:[
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#159AFF' }, // 设置颜色渐变
                        { offset: 1, color: 'rgba(0,58,255,0)' }
                    ]
                }
               ],
                xAxis: {
                    type: 'category',
                    data: this.timeList,
                    axisLabel:{
                        color:'#000',
                        // color:'#D0DEEE'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{
                        color:'#000',
                        // color:'#D0DEEE'
                    }
                },
                series: [
                    {
                        data: this.alarmcountbydayData,
                        type: 'bar',
                        showBackground: true,
                        barWidth: 50, 
                        label: {
                            show: true,
                            position: 'top',
                            valueAnimation: true,
                            textBorderWidth:'0',
                            color:'#000',
                            // color:'#fff',
                            fontSize:'15px'
                        }
                    }
                ]
            };
        }
    },
    components:{dvBox}
}
</script>

<style lang='scss' scoped>
p{
    margin: 0;
    padding: 0;
}
.environment-real{
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    .item{
        width: 250px;
        height: 112px;
        background: url("../../../../assets/images/environment-bg.png") 0 0 no-repeat;
        background-size: 100% 100%;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        p{
            font-size: 16px;
            // color: #fff;
            @include font_color($font-color-theme1);
            margin-bottom: 0;
        }
        h2{
            font-size: 46px;
            // color: #FFFFFF;
            @include font_color($font-color-theme2);
            font-weight: normal;
            // text-shadow: 0px 0px 9px #159AFF;
            font-family: 'youshe',Microsoft YaHei;
            margin: 0;
            span{
                font-size: 14px;
                font-family: Microsoft YaHei;
            }
        }
    }
}
.environment-real-light{
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    .item{
        width: calc(100% / 6 - 20px);
        height: 125px;
        display: flex;
        border-radius: 8px;
        .l{
            width: 70px;
            background: rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            i{
                font-size: 38px;
                color: #fff;
                font-weight: normal;
            }
        }
        .v{
            flex: 1;
            display: flex;
            flex-direction: column;
            padding-left: 30px;
            justify-content: center;
            p{
                font-size: 16px;
                color: #fff;
                margin-bottom: 6px;
            }
            h2{
                font-size: 46px;
                color: #FFFFFF;
                font-weight: normal;
                font-family: 'youshe',Microsoft YaHei;
                margin: 0;
                span{
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                }
            }
        }
        &:nth-child(1){
            background: linear-gradient(180deg, #1C68FB 0%, #80ABFF 100%);
        }
        &:nth-child(2){
            background: linear-gradient(180deg, #058BFC 0%, #52D8FF 100%);
        }
        &:nth-child(3){
            background: linear-gradient(180deg, #6153F0 0%, #5788FE 100%);
        }
        &:nth-child(4){
            background: linear-gradient(180deg, #1C68FB 0%, #80ABFF 100%);
        }
        &:nth-child(5){
            background: linear-gradient(180deg, #058BFC 0%, #52D8FF 100%);
        }
        &:nth-child(6){
            background: linear-gradient(180deg, #6153F0 0%, #5788FE 100%);
        }
    }
}
.echart-center{
    height: 100%;
    position: relative;
    .cutData{
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        div{
            height: 30px;
            font-size: 16px;
            color: #FFFFFF;
            font-weight: normal;
            text-shadow: 0px 0px 9px #159AFF;
            margin: 0;
            padding: 0 16px;
            line-height: 30px;
            cursor: pointer;
        }
        .active{
            background: linear-gradient(180deg, rgba(47,202,255,0) 0%, #159AFF 100%);
            border-bottom: 3px solid #0026ff;
            // border-bottom: 3px solid #159AFF;
        }
    }
}
.container{
    height: 100%;
    .overview{
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding-bottom: 30px;
        .viewbox{
            width: calc(100% / 6);
            height: 147px;
            border-radius: 2px;
            font-size: 18px;
            cursor: pointer;
            background: #fff;
            color: #fff;
            text-align: left;
            margin:0 10px;
            display: flex;
            align-items: center;
            padding-left: 20px;
            .label{
                font-size: 20px;
                line-height: 40px;
            }
            .value{
                font-size: 45px;
                font-weight: bold;
            }
        }
        .viewbox1{
            background-image: linear-gradient(90deg, #4669fe, #c773fd); 
        }
        .viewbox2{
            background-image: linear-gradient(90deg, #3cadf6, #606af1);
        }
        .viewbox3{
            background-image: linear-gradient(90deg, #ea647e, #f09d5b);
        }
        .viewbox4{
            background-image: linear-gradient(90deg, #40d799, #a8e25f);
        }
        .viewbox5{
            background-image: linear-gradient(270deg, #e25f9b 0%, #4048d7 100%);
        }
        .viewbox6{
            background-image: linear-gradient(270deg, #606af1 0%, #3cadf6 100%);
        }
    }
    .q_top{
        height: 40%;
        min-height: 304px;
    }
    .q_bottom{
        height: calc(60% - 150px);
        min-height: 306px;
    }
}

</style>